<!--
 * @Author: wukunling 13022195532@163.com
 * @Date: 2024-10-03 00:25:15
 * @LastEditors: wukunling 13022195532@163.com
 * @LastEditTime: 2024-10-03 23:52:43
 * @FilePath: /electron-vite-template/src/renderer/components/list-table/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <span class="title">
            连接服务列表 <el-button type="primary" round @click="addList">增加服务连接</el-button>
        </span>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="url" label="访问服务ip"></el-table-column>
            <el-table-column prop="port" label="访问服务端口">
                <template #default="{ row, index }">
                    <el-input v-if="row.editState" v-model="row.port" style="width: 140px" placeholder="Please input" />
                    <span v-else>{{ row.port }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="Type"></el-table-column>
            <el-table-column prop="localIp" label="本地服务ip">
                <template #default="{ row, index }">
                    <el-input v-if="row.editState" v-model="row.localIp" style="width: 140px"
                        placeholder="Please input" />
                    <span v-else>{{ row.localIp }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="localPort" label="本地服务端口">
                <template #default="{ row, index }">
                    <el-input v-if="row.editState" v-model="row.localPort" style="width: 140px"
                        placeholder="Please input" />
                    <span v-else>{{ row.localPort }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="desc" label="备注">
                <template #default="{ row, index }">
                    <el-input v-if="row.editState" v-model="row.desc" style="width: 140px" placeholder="Please input" />
                    <span v-else>{{ row.desc }}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作">
                <template #default="{ row, $index }">
                    <el-button v-if="!row.editState" link type="primary" size="small"
                        @click="edit(row, $index)">编辑</el-button>
                    <el-button v-else link type="primary" size="small" @click="edit(row, $index)">保存</el-button>
                    <el-button v-if="row.editState" link type="primary" size="small"
                        @click="cancel(row, $index)">取消</el-button>
                    <el-button :disabled="row.editState" link type="primary" size="small" @click="handleClick">
                        点击连接
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { invoke, vueListen } from "../../utils/ipcRenderer";
import { IpcChannel } from "../../../ipc";
import { ref } from "vue";
import { ElMessage } from "element-plus";
let editState: any = ref(false)
const handleClick = () => {
    editState.value = false

    ElMessage({
        offset: 40,
        type: "success",
        message: "服务启动中,10秒后生效...",
    });

    let cloneObj = JSON.parse(JSON.stringify(listDataMap.value))
    invoke(IpcChannel.LinkNetServe, cloneObj);
}

const upData = (row, index, type) => {
    tableData.value = tableData.value.map((item, _index) => {
        if (index == _index) {
            item.editState = !item.editState
            if (type == 'cancel') {
                item.editState = false
            }
        }
        return item
    })
}

const edit = (row, index) => {
    upData(row, index, 'edit')
}

const cancel = (row, index) => {
    upData(row, index, 'cancel')
}



// 增加服务连接
const addList = () => {
    tableData.value.push({
        "url": '47.121.182.221',
        "type": "tcp",
        "port": 81,
        "localIp": "192.168.1.14",
        "localPort": 5500,
        desc: '备注',
        editState: false
    })
}

const tableData: any = ref([
    {
        "url": '47.121.182.221',
        "type": "tcp",
        "port": 81,
        "localIp": "192.168.1.14",
        "localPort": 5500,
        desc: '备注',
        editState: false
    }
])

let listDataMap: any = ref({
    "serverIp": "47.121.182.221",
    "serverPort": 8989,
    "token": "12345676788",
    "registers": tableData.value
}); 
</script>